<template>
  <el-dialog title="收件地址" v-model="visible" align-center width="900px" @close="handleClose" :close-on-click-modal="false" :append-to-body="true">
    <div class="flex flex-wrap w-[100%]">
      <div v-for="item in formColumn" :key="item.key" :class="item.class || 'w-[25%]'" class="form-item">
        <label
          >{{ item.label }}
          <el-tooltip effect="dark" content="适用于ebay平台的“买家ID”" placement="top" v-if="item.key == 'buyer_name'">
            <span>
              <svg-icon icon-class="warning" class="mr-[4px] mt-[3px]"></svg-icon>：
            </span>
          </el-tooltip>
        </label>
        <span @click="item.click" :class="[{ 'text-[#3487ff] cursor-pointer': item.click }]">{{ formData[item.key] }} {{ formData[item.key2] || "" }}</span>
      </div>
    </div>
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
// import req from '@/views/user/list/add/api/index'
import req from "@/views/user/list/add/api/index"
const visible = ref(false)
const formData = ref({})
const openMaps = () => {
  let param = "https://www.google.com/maps?daddr="
  let keys = ["recipient_country", "recipient_province", "recipient_city", "recipient_region", "recipient_preferred_address", "recipient_secondary_address"]
  keys.forEach((key) => {
    param += formData.value[key] + " "
  })
  window.open(param, "_blank")
}
const formColumn = ref([
  { label: "买家姓名", key: "buyer_name", class: "w-[35%]" },
  { label: "收件人：", key: "recipient_name", key2: "recipient_last_name", class: "w-[40%]" },
  // { label: "公司名称：", key: "recipient_company", class: "w-[25%]" },
  { label: "联系电话：", key: "recipient_phone", class: "w-[30%]" },
  { label: "邮箱：", key: "recipient_email", class: "w-[350%]" },
  { label: "收件人证件/税号：", key: "recipient_tax_id", class: "w-[35%]" },
  { label: "国家/地区：", key: "recipient_country" },
  { label: "州/省：", key: "recipient_province" },
  { label: "城市：", key: "recipient_city" },
  { label: "区/县：", key: "recipient_region" },
  { label: "邮编：", key: "recipient_zip_code" },
  { label: "门牌号：", key: "recipient_door_num" },
  { label: "详细地址1：", key: "recipient_preferred_address", class: "w-[100%]", click: openMaps },
  { label: "详细地址2：", key: "recipient_secondary_address", class: "w-[100%]" },
])

// 打开弹窗
const open = async (row) => {
  visible.value = true
  formData.value = row.recipient
}
// 关闭弹窗
const handleClose = () => {
  visible.value = false
  formData.value = {}
}
defineExpose({
  open,
})
</script>
<style lang="scss" scoped>
.form-item {
  line-height: 32px;
  label {
    font-weight: bold;
  }
}
</style>
